<template>
	<div >
		<search></search>
		<div id="warp">
		    <span>分类</span>  
		    <span v-for="item,index in arr">>{{item.name}}</span>
			<ul>
				<li v-for="item,index in listData">
					<span>{{item.title}}:</span>
					<a href="javascript:;" v-for="option,i in item.list" v-bind:class="{active:item.index===i}"
						@click="listBundle(option,index,i)">{{option}}
					</a>
				</li>
			</ul>
			<div class="clearfloat"></div>
		</div>
		<goodslist></goodslist>
	</div>
</template>

<script>
	import search from '../components/search.vue'
	import shopheader from '../components/shopheader.vue'
	import goodslist from '../components/goodslist.vue'
	export default {
		data () {
		  return {
			  listData:[
				  {
				      title: '品牌',
				      list: ['小米6', '一加5', '荣耀9', '红米Note', '4X', '华为-mate 9', '红米4X', '美图M8', '锤子-坚果', 'PRO']
				  },
				  {
				      title: '运存',
				      list: ['2G', '4G', '6G', '8G']
				  
				  }
			  ],
			  parentid: null
		  }
		},
		components:{
			'shopheader':shopheader,
			'search':search,
			'goodslist':goodslist
		},
		methods:{
			listBundle(option, index, i) {
			    //找到操作的这一行，把这一行的数据中的index，设置为点击的标签的下标 
			    this.listData[index].index = i;
			    let param = {  //获取到元素的index 和 name
			        id: index,
			        name: option
			    }
			    this.arr.push(param)  //将获取的元素放到数组里面
			    // 用户点击重复的之后去除重复的数据 保证只存在一个相同的id
			    for (let i = 0; i < this.arr.length; i++) {
			        for (let j = i + 1; j < this.arr.length; j++) {
			            if (this.arr[i]['id'] == this.arr[j]['id']) { //判断是否存在重复的
			                // 将最后点击的id的name 赋值给现有的id里面的name
			                this.arr[i]["name"] = this.arr[j]['name']
			                this.arr.splice(j, 1) // 移除数据里面重复的
			            }
			        }
			    }
			},
			remove(index, id) {
			    this.$delete(this.arr, index, 1);  //删除arr里面用户点击的id
			    this.listData[id].index = -1;
			}
		},
		mounted() {
			this.parentid=this.$route.query.parentid
			console.log(this.parentid);
		}
	}
</script>

<style>
	#warp {
	    width: 80%;
	    margin: 0 auto;
	    border: 1px solid #ccc;
	}
	
	#warp li {
	    list-style: none;
	    float: left;
	    margin: 10px 20px 10px 10px;
	    width: 100%;
	    height: 70;
	}
	
	#warp div {
	    width: 100%;
	    height: 100%;
	}
	#warp span {
		margin-left: 10px;
		padding-right: 10px;
	}
	#warp a {
	    display: inline-block;
	    margin: 10px 20px 0 0;
	    text-decoration: none;
		color: #606266;
	}
	.clearfloat {
		clear:both;
	}
	.active {
		color: #409EFF;
	}
</style>
